<template>
  <el-button @click="goAddgoods">
    <el-icon>
      <Plus />
    </el-icon>
    添加</el-button>
  <el-table ref="multipleTableRef" :data="listone" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="商品编号" width="120">
      <template #default="scope">{{ scope.row.goodsId }}</template>
    </el-table-column>
    <el-table-column property="goodsName" label="商品名" width="120" />
    <el-table-column property="goodsIntro" label="商品简介" />
    <el-table-column label="商品图片">

      <template #default="scope">
        <img :src="scope.row.goodsCoverImg" alt="">
      </template>
    </el-table-column>
    <el-table-column property="stockNum" label="商品库存" />
    <el-table-column property="sellingPrice" label="商品售价" />
    <el-table-column label="上架状态">
      <template #default="scope">

        <span class="green" v-if="scope.row.goodsSellStatus == 0">上架</span>
        <span class="red" v-else>下架</span>
      </template>

    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <!-- {{ scope.row.redirectUrl }} -->

        <router-link  class="blue" :to="{path:'/index/adddoods',query:{id:scope.row.goodsId}}">修改</router-link>

        <span class="green" @click="handChange(scope.$index, scope.row)">
          {{ scope.row.goodsSellStatus == 0 ? "下架":  "上架" }}
        </span>

      </template>
    </el-table-column>
  </el-table>









  <!-- 分页 -->

  <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total" />


</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
import axios from '../../ajax';
import {useRouter} from "vue-router"
import { Plus } from '@element-plus/icons-vue'

let router=useRouter()
const multipleTableRef = ref()

const multipleSelection = ref([])
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
//拿数据
onMounted(() => {
  getdata(1)
})
let listone = ref([])
let total = ref(0)

let getdata = async (pageNumber) => {
  let { list, totalCount } = await axios.get('/goods/list', {
    params: {
      pageNumber,
      pageSize: 10
    }
  })
  listone.value = list
  // console.log(list);
  total.value = totalCount

}





//下架
let handChange = (i, row) => {
let status=listone.value[i].goodsSellStatus
let newStatus=status==1?0:1
changeStutus(newStatus,row.goodsId)
  listone.value[i].goodsSellStatus=newStatus
}
// 修改状态
 let  changeStutus=async (num,id)=>{
    let res=await axios.put(`/goods/status/${num}`,{
     
          ids:[id]
  
    })
 }


let getid = async (ids) => {//拿到id
  let res = await axios.delete('/goods/status', {
    data: {
      ids
    }

  })

}


//修改




let currentChange = (page) => {
  console.log(page);
  getdata(page)
}

let goAddgoods=()=>{
  router.push({
    path:"/index/adddoods"
  })
}



</script>

<style lang="scss" scoped>
.el-pagination {
  justify-content: center;
}

.cell {
  img {
    width: 100px;
    height: 100px;
  }
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}
</style>